$f: 19.2;

.home {
  // position: relative;
  width: 100%;

  .container {
    padding: 211/$f+vw 300/$f+vw 110/$f+vw 300/$f+vw;
    position: relative;
    background: #F9F6F1;

    .bg {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      overflow: hidden;
      max-height: 100%;
      img {
        display: block;
        max-height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }

    .main {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: space-between;
      gap: 57/$f+vw;
      background: #F9F6F1;

      .form {
        width: 75%;

        .item {
          margin-bottom: 22/$f+vw;

          input {
            width: 100%;
            border: 1px solid #C6C8CB;
            background: #FFF;
            height: 60/$f+vw;
            padding: 17/$f+vw 24/$f+vw;
            color: #000;
            font-size: 18/$f+vw;

            &::placeholder {
              color: #C5C5C5;
            }
          }

          textarea {
            width: 100%;
            border: 1px solid #C6C8CB;
            background: #FFF;
            height: 360/$f+vw;
            padding: 17/$f+vw 24/$f+vw;
            color: #000;
            font-size: 18/$f+vw;
            resize: none;

            &::placeholder {
              color: #C5C5C5;
            }
          }
        }

        button {
          width: 246/$f+vw;
          height: 72/$f+vw;
          border-radius: 41/$f+vw;
          background: #FFF;
          display: flex;
          align-items: center;
          justify-content: space-between;
          outline: none;
          border: none;
          padding: 0 37/$f+vw;
          cursor: pointer;
          transition: all 600ms;
          p{
            color: #000;
            font-size: 18/$f+vw;
            transition: all 600ms;
          }
          .icon{
            height: 52/$f+vw;
            width: 52/$f+vw;
            background-color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 600ms;
            svg{
              width: 32/$f+vw;
              display: block;
              path{
                transition: all 600ms;
              }
            }
          }
          &:hover{
            background-color: #000;
            p{
              color:#fff;
            }
            .icon{
              background-color: #fff;
              svg{
                path{
                  fill: #000;
                }
              }
            }
          }
        }
      }

      .info {
        width: 25%;
        line-height: 1.6;

        .p1 {
          color: #000;
          font-size: 26/$f+vw;
          font-weight: bold;
        }

        .des {
          color: #666;
          margin-bottom: 34/$f+vw;
          font-size: 18/$f+vw;
        }

        .code {
          img {
            width: 148/$f+vw;
            height: 148/$f+vw;
            display: block;
            box-shadow: 0px 4px 20px 0px rgba(16, 55, 112, 0.16);
          }
        }
      }
    }

  }



  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .container{
      padding: 20px 5% 60px 5%;
      .main{
        flex-direction: column;
        gap: 0;
        .form{
          width: 100%;
          .item{
            margin-bottom: 10px;
            input{
              font-size: 16px;
              height: 40px;
              padding: 10px;
            }
            textarea{
              font-size: 16px;
              height: 150px;
              padding: 10px;
            }
          }
          button{
            width: 140px;
            height: 45px;
            border-radius: 50px;
            padding: 0 15px;
            p{
              font-size: 14px;
            }
            .icon{
              width: 30px;
              height: 30px;
              svg{
                width: 15px;
              }
            }
          }
        }
        .info{
          width: 100%;
          margin-top: 20px;
          .p1{
            font-size: 18px;
          }
          .des{
            margin-bottom: 15px;
            font-size: 16px;
          }
          .code{
            img{
              width: 120px;
              height: auto;
            }
          }
        }
      }
    }
  }
}